<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        stripe
        border
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="上限人数">
                <span>{{ props.row.max_person }}</span>
              </el-form-item>
              <el-form-item label="活动地点">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="已报名">
                <span>{{ props.row.number }}</span>
              </el-form-item>
              <el-form-item label="提交时间">
                <span>{{ props.row.submission_time }}</span>
              </el-form-item>
              <el-form-item label="联系微信">
                <span>{{ props.row.wechat }}</span>
              </el-form-item>
              <el-form-item label="开始时间">
                <span>{{ props.row.start_time }}</span>
              </el-form-item>
              <el-form-item label="参与对象">
                <span>{{ props.row.object }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{ props.row.state }}</span>
              </el-form-item>
              <el-form-item label="活动简介">
                <span>{{ props.row.describe }}</span>
              </el-form-item>
              <el-form-item label="活动详情">
                <span>{{ props.row.details }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="活动编号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="活动名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="活动地点"
          prop="address">
        </el-table-column>
        <el-table-column
          width="180px"
          align="center"
          label=" 活动时间 "
          prop="start_time">
        </el-table-column>
        <el-table-column
          label="状态"
          prop="state">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!--                      <router-link :to="{path:'/manage_s/userList/123123'}">-->
            <!--                      <el-button-->
            <!--                      size="mini"-->
            <!--                      type="Success">查看</el-button>-->
            <!--                      </router-link>-->
            <el-button
              size="mini"
              type="Success"
              @click="goPay(scope.row.id)">查看
            </el-button>
            <!--                    <el-button-->
            <!--                          size="mini"-->
            <!--                          type="Success"-->
            <!--                          @click="addFood(scope.$index, scope.row)">查看</el-button>  -->
            <el-button
              size="mini"
              type="danger"
              :disabled="scope.row.state=='已取消'?true:false"
              @click="handleDelete(scope.$index, scope.row.id)">取消活动
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入活动名称搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">Edit
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2,3,4,5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"> //这是显示总共有多少数据，
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import {deleteActivity, getActivityLists} from '@/api/activity'
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 5,    //    每页的数据
      tableData: [],
      search: ''


    }
  },
  created() {
    this.initData();

  },
  components: {},
  methods: {
    async initData() {
      await this.getActivityList();
    },

    async goPay(id) {
      this.$router.push({
        path: '/manage_s/userList',
        query: {
          id: id,
        }
      })
    },

    async getActivityList() {
      const activitys = await getActivityLists();
      this.tableData = [];
      console.log(activitys);
      activitys.forEach(item => {
        const tableData = {};
        tableData.name = item.name;
        tableData.number = item.number;
        tableData.address = item.address;
        tableData.describe = item.describe;
        tableData.id = item.id;
        tableData.wechat = item.wechat;
        tableData.state = (item.state == 0) ? "审核中" : ((item.state == 1) ? "已通过" : ((item.state == -2) ? "已取消" : "未通过"));
        tableData.object = item.object;
        tableData.start_time = item.startTime;
        tableData.details = item.details;
        tableData.submission_time = item.submissionTime;
        tableData.max_person = item.maxPerson;
        this.tableData.push(tableData);
      })

    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.initData();
      console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },

    async handleDelete(index, id) {
      this.$confirm('此操作将取消该' + id + '活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const state = deleteActivity({id: id});
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.initData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style lang="postcss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}




</style>
